<template>
  <div class="musicPlayList">
    <el-dialog
      v-model="useStore.isMusicPlayList"
      width="min(90%,550px)"
      :show-close="true"
      center
    >
      <h3>音乐播放列表</h3>
      <el-scrollbar height="400px" style="margin-top: 10px">
        <el-empty
          v-if="data.musicSearchList.length === 0"
          description="你的歌单没歌"
        />
        <div
          v-else
          class="music-list-item"
          v-for="(item, index) in data.musicSearchList"
          :key="index"
          @click="clickPlay(item,index)"
        >
          <p>
            {{ item.name }}
          </p>
          <p class="music-author">
            <span v-for="(a, index) in item.ar" :key="index">
              {{ a.name }}-
            </span>
            {{ item.al.name }}
          </p>
          <svg class="icon bf-icon" aria-hidden="true" @click.stop="delMusic(item)">
            <use xlink:href="#icon-shanchu2"></use>
          </svg>
        </div>
      </el-scrollbar>
    </el-dialog>
  </div>
</template>
 
<script setup>
import { useHomeStore } from "@/stores/home";
import { onMounted, onUpdated, reactive, watch } from "vue";
const useStore = useHomeStore();
const data = reactive({
  musicSearchList: useStore.musicList,
});
const delMusic = (item_)=>{
    console.log(item_);
    const index = useStore.musicList.findIndex((item) => item.id === item_.id);
    useStore.musicList.splice(index, 1);
    console.log(useStore.musicList);
}
const clickPlay = (item,index) => {
    useStore.index = index
  useStore.bf_List = item;
};
</script>
 
<style lang="less">
h3 {
  text-align: center;
}

.music-list-item {
  position: relative;
  cursor: pointer;
  height: 45px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-bottom: 1px solid #efefef;
  p:nth-child(1) {
    font-size: 17px;
  }
  .music-author {
    transform: scale(0.8);
    margin-left: -55px;
  }
  .icon {
    width: 20px;
    height: 20px;
  }
  .bf-icon {
    position: absolute;
    top: 7px;
    right: 10px;
    padding: 5px;
    
  }
  .bf-icon:hover{
    background-color: #efefef;
    border-radius: 50%;
  }
}
.music-list-item:nth-child(1) {
  margin-top: 10px;
}
</style>
